<template>
    <el-sub-menu v-if="menuItem.childrenItemTitle?.length" :index="menuItem.index ?? ''">
        <template #title>
            <el-icon>
                <SvgIcon :name="menuItem.subItemIconName || 'default-icon'" />
            </el-icon>
            <span>{{ menuItem.label }}</span>
        </template>
        <template v-for="child in menuItem.childrenItemTitle" :key="child.index">
            <MenuItem :menu-item="child" />
        </template>
    </el-sub-menu>

    <el-menu-item v-else :index="menuItem.index as string">
        <el-icon>
            <SvgIcon :name="menuItem.subItemIconName || 'default-icon'" :color="menuItem.subItemActiveColor" />
        </el-icon>
        <span>{{ menuItem.label }}</span>
    </el-menu-item>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";

interface ISubNavPath {
    label?: string;
    index?: string;
    subItemIconName?: string;
    subItemActiveColor?: string;
    childrenItemTitle?: Array<ISubNavPath>;
}

defineProps({
    menuItem: {
        type: Object as PropType<ISubNavPath>,
        required: true,
    },
});
</script>
